window.addEventListener("load", function () {
	// 实现海量API区移入移出
	// 1.获取相关节点
	$("#allpic .pic");
	// 2.给li绑定移入移出事件
	let oldUrl = "";
	$("#allpic .pic").forEach(function (v) {
		// 移入事件
		v.addEventListener("mouseover", function () {
			// 背景颜色变蓝
			this.style.backgroundColor = "blue";
			// 文字变白
			this.style.color = "white";
			// 切换为透明的图片
			// 将图片后缀名添加一个-c
			// api01.svg==>api01-caches.svg
			let imghUrl = this.firstElementChild.src;
			// let str = imgUrl.slice(imghUrl.lastIndexOf('.'))获取动态后缀名
			// console.log('---',imghUrl.replace(str,'-c.svg'));
			// 直接写死
			this.firstElementChild.src = imghUrl.replace(".svg", "-c.svg");
			oldUrl = imghUrl;
		});

		// 移出事件
		v.addEventListener("mouseout", function () {
			// 背景变白
			this.style.backgroundColor = "white";
			// 文字变黑
			this.style.color = "black";
			// 切换为原来图片
			this.firstElementChild.src = oldUrl;
		});
	});

	//    功能二，独角兽区轮播图
	// 思路，将多个图文结构重叠在一起，每隔三秒让其显示
	// 获取相关节点
	const nodeUnicornpt = $(".unicornpt");
	nodeUnicornpt[0].style.opacity = "1";
	let index = 1;
	// 设置周期定时器每隔3秒显示
	this.window.setInterval(function () {
		// 通过节点索引访问对应的节点
		nodeUnicornpt.forEach(function (v) {
			v.style.opacity = "0";
		});
		// 通过索引显示内容，其他不显示
		nodeUnicornpt[index].style.opacity = "1";
		// 设置索引，每隔周期就++
		index++;
		// 当索引达到最大限度是返回初始状态
		if (index > nodeUnicornpt.length - 1) {
			index = 0;
		}
	}, 3000);

	//   功能三，回到顶部按钮
	// 获取相关节点、
	const nodeRerurnTop = $("#return-top");
	// 设置点击事件
	this.window.addEventListener("scroll", function () {
		if (this.scrollY > 800) {
			nodeRerurnTop.style.opacity = "1";
		} else {
			nodeRerurnTop.style.opacity = "0";
		}
	});
	nodeRerurnTop.addEventListener("click", function () {
		// 设置滚动事件 平滑滚动
		window.scrollTo({
			top: 0,
			behavior: "smooth",
		});
	});

	var mySwiper = new Swiper(".swiper", {
		autoplay: true, //可选选项，自动滑动

		pagination: {
			el: ".swiper-pagination",
			clickable: true,
		},
		// 如果需要前进后退按钮
		navigation: {
			nextEl: ".swiper-button-next",
			prevEl: ".swiper-button-prev",
		},
	});
});
